<template>
  <div class="page">
    <div class="page-content">
      <div>
        <el-tabs v-model="certificateType" class="demo-tabs" @tabChange="tabChange">
          <el-tab-pane label="绿色债券认证" name="bond"></el-tab-pane>
          <el-tab-pane label="绿色主体认证" name="issue"></el-tab-pane>
        </el-tabs>
      </div>
      <bond-certificate v-if="certificateType === 'bond'" :companyId="companyId"></bond-certificate>
      <issue-certificate v-if="certificateType === 'issue'" :companyId="companyId"></issue-certificate>
    </div>
  </div>
</template>
<script lang="ts" setup>
import bondCertificate from './bond-certificate/index.vue'
import issueCertificate from './issue-certificate/index.vue'

interface Props {
  companyId: string;
  index: any;
}

const {
  companyId,
  index
} = defineProps<Props>();
let certificateType = ref(index);
const tabChange = (name) => {
  certificateType.value = name
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
